<template>
  <div
    class=""
    :style="{
      height: '100%',
      backgroundColor: '#042037dd',

      '--imgw': getscalepx(1),
      '--imgh': getscalepx(3),
      '--imgr': getscalepx(-13),
      '--imgt': getscalepx(-5),
      '--imgp': getscalepx(5),
    }"
  >
    <commondatatable
      :header="header"
      :datalist="datalist"
      :contentfont="getscalepx(15)"
      :coltype="coltype"
      :nametype="nametype"
      :dtscrolle="dtscrolle"
    />
  </div>
</template>
<script>
import commonmixins from "@/mixins/bigScreen/commonmixins";

export default {
  name: "commondatatableguanwang",
  mixins: [commonmixins],
  components: {},
  data() {
    return {
      header: [],
      datalist: [],
      coltype: "",
      nametype: "center",
      dtscrolle: 0,
    };
  },
  computed: {},
  watch: {
    "$store.state.daping.queryDbPipenetzz": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  mounted() {
    this.coltype = this.componentDetail.coltype
      ? this.componentDetail.coltype
      : "";
    this.nametype = this.componentDetail.nametype
      ? this.componentDetail.nametype
      : "center";
    this.dtscrolle = this.componentDetail.dtscrolle
      ? this.componentDetail.dtscrolle
      : 0;
    //header------------------------------------------------------
    let unitcolor = "#56C5FA";
    this.header = [
      {
        name: `<div style='background-image: url("/configuration/2d/guanwang.png");width: fit-content;background-size: 100% 100%;background-position: center;background-repeat: no-repeat;padding: 5px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>`,
        flex: 15,
      },
      {
        name: `热量<br/><span style="color: ${unitcolor};">(MW)</span>`,
        flex: 10,
      },
      {
        name: `流量<br/><span style="color: ${unitcolor};">(t/h)</span>`,
        flex: 10,
      },
      {
        name: `平均流量<br/><span style="color: ${unitcolor};">(kg/(h*㎡))</span>`,
        flex: 10,
      },
      {
        name: `热单耗<br/><span style="color: ${unitcolor};">(W/m³)</span>`,
        flex: 10,
      },
    ];
    this.header = this.header.map((item) => {
      item.name = "<div>" + item.name + "</div>";
      return item;
    });
  },
  methods: {
    loadData(pipenetDataObj) {
      let dataa = [];
      let total1 = 0;
      let total2 = 0;
      let total3 = 0;
      let total4 = 0;
      let totalArea = 0;
      pipenetDataObj.forEach((v, i) => {
        dataa.push([
          '<span style="color:#F0BF7B;">' + Object.keys(v)[0] + "</span>",
          '<span style="color:#A0C8DB;">' + Object.values(v)[0].sa003qc ||
            0 + "</span>",
          '<span style="color:#A0C8DB;">' + Object.values(v)[0].sa001q ||
            0 + "</span>",
          '<span style="color:#A0C8DB;">' + Object.values(v)[0].sa056q ||
            0 + "</span>",
          '<span style="color:#A0C8DB;">' +
            Object.values(v)[0].unitConsumption || 0 + "</span>",
        ]);
        total1 += Number(Object.values(v)[0].sa003qc);
        total2 += Number(Object.values(v)[0].sa001q);
        total3 += Number(Object.values(v)[0].sa056q);
        total4 += Number(Object.values(v)[0].unitConsumption);
        totalArea += Number(Object.values(v)[0].sa001heatare);
      });
      let avgll = (total2 * 1000) / totalArea / 10000;
      let avgHeat = (total1 * 1000000) / totalArea / 10000;
      dataa.push([
        '<span style="color:#F0BF7B;">合计</span>',
        '<span style="color:#A0C8DB;">' + Number(total1).toFixed(0) + "</span>",
        '<span style="color:#A0C8DB;">' + Number(total2).toFixed(0) + "</span>",
        '<span style="color:#A0C8DB;">' + Number(avgll).toFixed(2) + "</span>",
        '<span style="color:#A0C8DB;">' +
          Number(avgHeat).toFixed(2) +
          "</span>",
      ]);
      this.datalist = dataa;
    },
    settype(data) {
      return data.map((item, index) => {
        if (index != 0) {
          let fff = _.random(0, 100);
          if (fff > 50) {
            if (item > 50) {
              return (
                // '<span style="color: #DA5A28;position: relative;"><div class="tablewarnhigh"></div>' +
                '<span style="color: #DA5A28;position: relative;">' +
                item +
                "</span>"
              );
            } else {
              return (
                // '<span style="color: #139CF6;position: relative;"><div class="tablewarnlow"></div>' +
                '<span style="color: #139CF6;position: relative;">' +
                item +
                "</span>"
              );
            }
          } else {
            return (
              '<span style="color: #ACCAD5;position: relative;">' +
              item +
              "</span>"
            );
          }
        } else {
          return item;
        }
      });
    },
  },
};
</script>
<style lang='scss'>
.tablewarnhigh {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinghigh.png");
  width: var(--imgw);

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
.tablewarnlow {
  position: absolute;
  right: var(--imgr);
  top: var(--imgt);
  background-image: url("/configuration/2d/gaojinglow.png");
  width: var(--imgw);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--imgp);
}
</style>